<template>
  <nav class="text-center">
    <ul class="pagination">
      <li v-if="currentPage === 1" class="disabled"><a href="#"><span>&laquo;</span></a></li>
      <li v-else @click="setCurrentPage(currentPage - 1)"><a href="#"><span>&laquo;</span></a></li>

      <li @click="setCurrentPage(page)" :class="{active: currentPage === page}" v-for="(page, index) in max" :key="index"><a href="#">{{page}}</a></li>

      <li class="disabled" v-if="currentPage === max"><a href="#"><span>&raquo;</span></a></li>
      <li v-else @click="setCurrentPage(currentPage + 1)"><a href="#"><span>&raquo;</span></a></li>

    </ul>
  </nav>
</template>

<script>
export default {
  props: {
    max: Number,
    currentPage: Number
  },
  methods: {
    setCurrentPage (page) {
      this.$emit('update:currentpage', page)
    } 
  }
}
</script>

<style>

</style>
